<template>
    <div class="new-ullist-wrap">
        <div class="vstitle">
            <div class="title">
                {{ title.value }}
            </div>
            <div class="itemlinks">
                <div class="i-link info">
                    {{ title.info }}
                </div>
            </div>
        </div>
        <div class="ullist">
            <div @click="handleClick(item)" v-for="item in list" :key="item.id">
                <CompItem :src="item.cover" class="clear-margin-right4n" item-width="280px">
                    <slot :item="item"></slot>
                </CompItem>
            </div>
        </div>
        <!-- 推荐栏目的数据 -->
    </div>
</template>
<script setup lang="ts">
import CompItem from "@/components/contests/CompItem.vue";
import { NawRaceListProps } from "@/types/coutest";
import { useRouter } from "vue-router";

const router = useRouter();
const props = defineProps<NawRaceListProps>();

// 获取 竞赛的 详情 数据
// 获取 竞赛的 详情 数据
const handleClick = (item: any) => {
    let type = props.type;
    const contestId = item?.id;
    const categoryId = item?.categoryId;
    if (type === 0) {
        // 竞赛
        router.push({
            path: "/contest-details",
            query: { contestId, categoryId, type },
        });
    } else {
        // 活动
        router.push({
            path: "/events-details",
            query: { contestId, categoryId, type },
        });
    }
};
</script>
<style lang="scss" scoped>
.new-ullist-wrap {
    margin-bottom: 50px;
    > .vstitle {
        display: flex;
        align-items: baseline;
        width: 1200px;
        margin: 42px auto 35px;

        > .title {
            font-family: "AlimamaShuHeiTiBold";
            font-size: 28px;
            color: #31363f;
            font-weight: 700;
            margin-right: 30px;
            position: relative;
            padding-left: 60px;

            &::before {
                content: "";
                position: absolute;
                bottom: -7px;
                left: 0;
                width: 60px;
                height: 60px;
                background: url("https://cdn3.saikr.com/img/saikrnew/vs/trophy_pic@2x.png") no-repeat;
                background-size: auto;
                background-size: 100% 100%;
            }
        }

        > .itemlinks {
            display: flex;
            margin-right: auto;

            > .i-link {
                font-size: 14px;
                color: #909eab;
                padding-right: 5px;
                margin-right: 15px;
                position: relative;
            }
        }
    }

    > .ullist {
        display: flex;
        width: 1200px;
        margin: 0 auto;
        flex-wrap: wrap;
    }
}
</style>
